<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#open').click(function(){
        $('#popup').fadeIn('slow');
    });

    $('#close').click(function(){
        $('#popup').fadeOut('slow');
    });
});
</script>
<style type="text/css">
#popup {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
    overflow: scroll;
}

.content-popup {
    margin:0px auto;
    margin-top:50px;
    padding:10px;
    width:500px;
    min-height:250px;
    border-radius:4px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 5px #666666;
    overflow: scroll;
}

.close {
    position:relative;
    left:480px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<a href="#" id="open">apretame</a>
<div id="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>
        <div><a href="#" onclick="document.getElementById('test').innerHTML = 'ADIOS';">Contenido POPUP</a></div>
        <div id="test"></div>
    </div>
</div>
</body>
</html>